<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8"/>
	<title>Dashboard I Admin Panel</title>
	
	<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
	<script src="js/hideshow.js" type="text/javascript"></script>
	<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.equalHeight.js"></script>

	 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />

<script type="text/javascript" charset="utf-8">

</script>
	
	<script type="text/javascript">
	$(document).ready(function() { 
      	  $(".tablesorter").tablesorter();
   	 });

	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
</script>
    
	<script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
   </script>

	<script>
		$(document).ready(function(){
		$('#new_user_section').hide();
			 $('#newuser').click(function(){
				$('#main').hide();
				$('#new_user_section').show();
			});
			
			$('#newarticle').click(function(){
				$('#main').show();
				$('#new_user_section').hide();
			});
			
		});
	</script>

	 <script>
		
		$(function(){
			$("#functionHall_dd").change(function(){
				//alert("inside the function");
				$.getJSON("getAvailabilityDetailsAjax.php",{id: $("#functionHall_dd").val(),toCall:'getDates', ajax: 'true'}, function(j){
				//alert(j.length);
				  var options = '';
				  options += '<option value=-1 selected>---Select Date---</option>';
				  for (var i = 0; i < j.length; i++) {
					options += '<option value="' + j[i].optionValue + '" >' + j[i].optionDisplay + '</option>';
				  }		
				  $("#dates").html(options);
				});
			});
		});

		$(function(){
			$("#dates").change(function(){
				//alert("inside the function");
				$.getJSON("getAvailabilityDetailsAjax.php",{id: $("#functionHall_dd").val(),date: $("#dates").val(),toCall:'getSlots', ajax: 'true'}, function(j){
				//alert(j.length);
				  var options = '';
				  options += '<option value=-1 selected>---Select Date---</option>';
				  for (var i = 0; i < j.length; i++) {
					options += '<option value="' + j[i].optionValue + '" >' + j[i].optionDisplay + '</option>';
				  }		
				  $("#slots").html(options);
				});
			});
		});
	</script>

</head>


<body>

	<section id="main" class="column">
		
		<h4 class="alert_info">Welcome to the Admin panel of Location</h4>
		
		<div class="clear"></div>
		
		<form action="commonController/EditAvailabilityDetailsController.php" method="POST" enctype="multipart/form-data">
		<article class="module width_full">
				<header><h3>Update Availability</h3></header>
				<div class="module_content">
				<fieldset style="width:48%; float:left; margin-right: 3%;"> <!-- to make two field float next to one another, adjust values accordingly -->
							<label>Function Hall Names</label>
							<select style="width:50%;" name="functionHall" id="functionHall_dd" >
								<option value="">---Select Function Hall---</option>
							<?php 
								 //Connects to your Database 
								 $db_host = 'localhost';
								 $db_user = 'function';
								 $db_pwd = 'w9ak4X1l0Y';

								 $database = 'function_a5110060';

								 $con = mysql_connect($db_host, $db_user, $db_pwd); 
								 mysql_select_db($database,$con) or die(mysql_error()); 
								  $data = mysql_query("SELECT DISTINCT fh.function_hall_id, fh.function_hall_name FROM Availability_Details ad, Function_Hall fh WHERE fh.function_hall_id = ad.function_hall_id")
								 or die(mysql_error()); 
								 while($info = mysql_fetch_array( $data )) 
								 { 
									
									 Print	"<option value='".$info['function_hall_id']."'>".$info['function_hall_name']."</option>";   
								 } 
							?> 
								
							</select>
							</fieldset>
						<div class="clear"></div>
						<fieldset>
							<label>Dates</label>
							<select style="width:50%;" name="dates" id="dates" >
							</select>
						</fieldset>
						<fieldset>
							<label>Slots</label>
							<select style="width:50%;" name="slots" id="slots" >
							</select>
						</fieldset>
						<fieldset>
							<label>Status</label>
							<select style="width:50%;" name="status">
								<option value="-1">---Select Status---</option>
								<option value="booked">Booked</option>
								<option value="available">Available</option>
							</select>
						</fieldset>
						
						<div class="clear"></div>
				</div>
			<footer>
				<div class="submit_link">
					
					<input type="submit" value="Update Availability Details" class="alt_btn">
					<input type="reset" value="Reset">
				</div>
			</footer>
		</article><!-- end of post new article -->
		</form>

		<div class="spacer"></div>
	</section>

</body>

</html>